import React, { Component } from 'react'
import { connect } from 'react-redux'
import action from './action'
import { Carousel } from 'antd-mobile'
import { Link } from 'react-router-dom'
class Home extends Component {
  componentDidMount() {
    this.props.getBannerList()
    this.props.getProList()
  }
  render() {
    console.log(this.props)
    return (
      <div className="box">
          <header className="header">
            <ul>
              <li>左</li>
              <li>首页</li>
              <li></li>
            </ul>
          </header>
          <div className="content">
          <Carousel
            autoplay={true}
            infinite
            >
              {this.props.bannerList.map(item => (
                <a
                  key={item.bannerid}
                  href={ item.href }
                  style={{ display: 'inline-block', width: '100%', height: 176 }}
                >
                  <img
                    src={ item.img }
                    alt=""
                    style={{ width: '100%', verticalAlign: 'top' }}
                    onLoad={() => {
                      // fire window resize event to change height
                      window.dispatchEvent(new Event('resize'));
                    }}
                  />
                </a>
              ))}
            </Carousel>

            <ul>
              {
                this.props.proList.map(item => {
                  return (
                  <div key = { item.proid }>
                    <Link to={ '/detail/' + item.proid } > { item.proname }</Link>
                  </div>
                  )
                })
              }
            </ul>
          </div>
        </div>
    )
  }
}

export default  connect((state) => {
  return {
    bannerList: state.home.bannerList,
    proList: state.home.proList
  }
}, (dispatch) => {
  return {
    getBannerList () {
      dispatch(action.getBannerListAction)
    },
    getProList () {
      dispatch(action.getProListAction( { limitNum: 20 } ))
    }
  }
})(Home)